<template>
  <div class="main-tabs">
    <div class="content-wrapper">
      <router-view></router-view>
    </div>
    <van-tabbar route v-model="active" @change="onChange" class="h-[50px] z-999">
      <van-tabbar-item :to="{ name: 'cartTab' }">
        <template #icon>
          <img :src="cardSrc" class="w-8 h-8" alt="" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item :to="{ name: 'home' }">
        <template #icon>
          <img :src="homeSrc" class="w-10 h-10" alt="" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item :to="{ name: 'mine' }">
        <template #icon>
          <img :src="mineSrc" class="w-10 h-10" alt="" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vant'
export default {
  name: "MainTabs",
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
  data() {
    return {
      active: 1,
      cardSrc: require("@/assets/images/card.png"),
      homeSrc: require("@/assets/images/yoyo.png"),
      mineSrc: require("@/assets/images/mine.png"),
    }
  },
  methods: {
    onChange(index) {
      // 可以添加额外的切换逻辑
      console.log(`切换到第 ${index} 个 Tab`)
    },
  },
}
</script>

<style scoped>
.main-tabs {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.content-wrapper {
  flex: 1;
  overflow-y: auto;
}
/deep/.van-tabbar-item__icon img {
  height: auto;
}
</style>
